<template>
  <!-- 礼包订单管理 -->
  <div class="app-container" ref="DOM">
    <!-- 查询模块 -->
    <div class="formDiv">
      <el-form ref="form" :inline="true" :model="form" label-width="130px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="订单号">
              <el-input v-model="form.order_sn" clearable @keyup.enter.native="handleSearch" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="姓名">
              <el-input v-model="form.realname" clearable @keyup.enter.native="handleSearch" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机号">
              <el-input v-model="form.phone" clearable @keyup.enter.native="handleSearch" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="上级姓名">
              <el-input
                v-model="form.superior_realname"
                clearable
                @keyup.enter.native="handleSearch"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="上级手机号">
              <el-input v-model="form.superior_phone" clearable @keyup.enter.native="handleSearch" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="订单状态">
              <el-select
                v-model="form.order_status"
                placeholder="请选择"
                clearable
                @keyup.native="handleSearch"
              >
                <el-option
                  v-for="(item,index) in statusType"
                  :key="index"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="发货状态">
              <el-select
                v-model="form.ship_status"
                placeholder="请选择"
                clearable
                @keyup.native="handleSearch"
              >
                <el-option
                  v-for="(item,index) in sendType"
                  :key="index"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="下单日期" width="236">
              <el-date-picker
                v-model="order_time"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="daterange"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :default-time="['00:00:00', '23:59:59']"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="支付日期" width="236">
              <el-date-picker
                v-model="pay_time"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="daterange"
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :default-time="['00:00:00', '23:59:59']"
              />
            </el-form-item>
          </el-col>
          <el-col :span="10" style="float:right">
            <el-form-item>
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button type="primary" @click="handleExport">导出</el-button>
              <!-- <Exprotcomponent :params="form" url="admin/order/card_ticket_export" type="php"></Exprotcomponent> -->
              <el-button type="primary" @click="handle">物流信息导入</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 主页列表 -->
    <div class="listDiv" v-loading="tableLoading">
      <el-table ref="tableData" :data="tableData" style="width: 100%" height="600px">
        <!--   -->
        <el-table-column
          fixed
          type="index"
          label="编号"
          width="50"
          align="center"
          :index="table_index"
        />
        <el-table-column label="订单编号" prop="pay_order_num" align="center" width="200px" />
        <el-table-column label="姓名" prop="realname" align="center"></el-table-column>
        <el-table-column label="手机号" prop="username" align="center" width="120px"></el-table-column>
        <el-table-column label="上级姓名" prop="superior_realname" align="center" width="120px"></el-table-column>
        <el-table-column label="上级手机号" prop="superior_username" align="center" width="120px"></el-table-column>
        <el-table-column label="礼包名称" prop="good_name" align="center" width="120px" />
        <el-table-column label="订单状态" prop="status_name" align="center" width="120px"></el-table-column>
        <el-table-column label="来源" prop="app_type_name" align="center" width="120px" />

        <el-table-column label="支付方式" prop="payment_name" align="center" width="120px"></el-table-column>
        <el-table-column label="原价" prop="good_amount" align="center" width="120px" />
        <el-table-column label="优惠券优惠" prop="coupon_money" align="center" width="120px" />
        <el-table-column label="实付金额" prop="pay_amount" align="center" width="140px" />
        <el-table-column label="支付时间" prop="pay_time" align="center" width="200px">
          <template slot-scope="scope">
            <span v-if="scope.row.pay_time">{{(scope.row.pay_time)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="核销时间" prop="pay_time" align="center" width="200px">
          <template slot-scope="scope">
            <span v-if="scope.row.combo_type == 0">无</span>
            <span v-if="scope.row.combo_type == 1">{{(scope.row.verification_date)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="礼包类型" align="center" width="140px">
          <template slot-scope="scope">
            <span v-if="scope.row.combo_type == 0">实物</span>
            <span v-if="scope.row.combo_type == 1">优惠券</span>
          </template>
        </el-table-column>
        <el-table-column label="收货人姓名" prop="receiver" align="center" width="140px" />
        <el-table-column label="收货人手机号" prop="tel_number" align="center" width="140px" />
        <el-table-column label="收货人地址" prop="detail_info" align="center" width="140px" />
        <el-table-column label="物流单号" prop="tracking_num" align="center" width="140px" />
        <el-table-column label="发货状态" prop="ship_status_name" align="center" width="140px" />
        <el-table-column label="操作" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button size="small" type="text" @click="dividedEtails(scope.row.id,scope.row)">提成详情</el-button>
            <el-button
              size="small"
              type="text"
              @click="completeDelivery(scope.row.pay_order_num)"
              v-if="scope.row.ship_status==0&&scope.row.status==1&&scope.row.combo_type==0"
            >完成发货</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagesCon">
        <div>
          <el-pagination
            :current-page="form.page"
            :page-sizes="page_sizes"
            :page-size="form.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page_totals"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <el-dialog title="完成发货" :visible.sync="centerDialogVisible" width="30%" center>
        <el-form>
          <el-form-item label="请输入物流单号">
            <el-input v-model="tracking_num"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
      </el-dialog>
    </div>
    <!-- 分成详情弹窗 -->
    <el-dialog title="提成详情" :visible.sync="dividedDialogVisible" width="80%" center>
      <h5 class="titleInfo">提成详情</h5>
      <el-row>
        <el-col :span="16" style="background:white">
          <el-form
            ref="form1"
            :inline="true"
            label-position="top"
            :model="form1"
            label-width="200px"
          >
            <el-row>
              <el-col :span="8">
                <el-form-item label="订单编号">
                  <span class="spanToInput">{{form1.detailInfo.pay_order_num | noFn}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="购买人姓名">
                  <span class="spanToInput">
                    <span>{{form1.detailInfo.realname | noFn}}</span>
                  </span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="手机号">
                  <span class="spanToInput">
                    <span>{{form1.detailInfo.username | noFn}}</span>
                  </span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="购买数量">
                  <span class="spanToInput">{{form1.detailInfo.number | noFn}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="实付金额">
                  <span class="spanToInput">{{form1.detailInfo.pay_amount | noFn}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="订单生成时间">
                  <span class="spanToInput">{{(form1.created_at)}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="分成发放时间">
                  <span class="spanToInput">{{form1.applyTime | noFn}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="订单状态">
                  <span class="spanToInput">{{form1.detailInfo.status | statusFn}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="分成模式">
                  <span class="spanToInput">{{form1.formTypeValue | noFn}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <div v-loading="tableLoading1" style="width:100%;">
                  <el-table ref="tableData1" :data="tableData1" border>
                    <el-table-column label="推荐人姓名" prop="realname" align="center" />
                    <el-table-column label="手机号" prop="username" align="center" />
                    <el-table-column label="推荐人级别" prop="role_name" align="center" />
                    <el-table-column label="奖励金额" prop="amount" align="center" />
                    <el-table-column label="奖励比率(%)" prop="dis_ratio" align="center" />
                    <el-table-column label="奖励类型" prop="msg" align="center">
                      <template slot-scope="scope">{{scope.row.msg}}</template>
                    </el-table-column>
                    <el-table-column label="分成基数" prop="base_money" align="center" />
                    <el-table-column label="分成基数类型" prop="base_type" align="center" />
                    <el-table-column label="创建时间" prop="create_at" align="center" />
                  </el-table>
                </div>
              </el-col>
            </el-row>
          </el-form>
        </el-col>

        <el-col :span="8">
          <div class="recommend">
            <div>当前推荐关系</div>
            <div v-if="userList.length>0">
              <div class="box" v-for="(item,index) in userList" :key="index">
                <div class="boxContent">{{item}}</div>
                <div class="arrow" v-if="index!=userList.length-1">↓</div>
              </div>
            </div>
            <div v-else class="mb_20">暂无</div>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
    <el-dialog
      title="导入物流信息"
      :visible.sync="logisticsDialog"
      width="30%"
      center
      class="dialogColor"
      @close="close"
    >
      <el-form :model="form">
        <el-form-item label="标题" label-width="200px">
          <!-- <el-input v-model="form.name" autocomplete="off"></el-input> -->
          <UploadExcelComponent :on-success="handleSuccess" :before-upload="beforeUpload"></UploadExcelComponent>
          <div class="el-upload__tip" style="margin-left:16px" v-if="file.length">{{fileName}}</div>
          <el-upload
            class="upload-demo"
            ref="upload"
            multiple
            accept=".xlsx"
            action
            :with-credentials="true"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-change="fileChange"
            :before-upload="beforeAvatarUpload"
            :on-success="upFile"
            :file-list="fileList"
            :limit="limitUpload"
            :auto-upload="false"
          >
            <!-- <el-button slot="trigger" size="small" type="primary">选取文件</el-button> -->
            <div slot="tip" class="el-upload__tip">只能上传xlsx格式的 excel文件</div>
          </el-upload>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <h5 class="titleInfo">提交导入后，发货状态会变更为已发货，请仔细核查</h5>

        <el-button type="primary" :loading="loading" @click="send">提交导入信息</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import axios from "axios";
import serv from "@/utils/request1";
import {
  orderGiftList,
  giftDeliverGoods,
  incomeTrans,
  giftLogisticsImport,
} from "@/api/NewRetailSystem";

// import commonFn from "@/utils/common";
import filter from "@/assets/filter";
import { orderGiftExport } from "../../api/NewRetailSystem";
import commonFn from "@/utils/common";
import UploadExcelComponent from "@/components/UploadExcel/index.vue";
export default {
  name: "GiftBagOrder",
  components: { UploadExcelComponent },
  data() {
    return {
      order_time: [],
      pay_time: [],
      // 列表请求数据
      form: {
        order_sn: "",
        realname: "",
        phone: "",
        superior_realname: "",
        superior_phone: "",
        order_status: "",
        ship_status: "",
        order_time: [],
        pay_time: [],
        page: 1,
        pagesize: 10,
      },
      // 订单编号
      tracking_num: "",
      //详情数据
      form1: {
        list1: [],
        list2: [],
        list3: [],
        listDetail: {},
        detailInfo: {},
        formTypeValue: "",
        applyTime: "",
        created_at: "",
      },
      userList: [],
      dividedInfo: [],
      type: "",
      placeDates: null,
      payDates: null,
      // 分页
      page_sizes: [10, 30, 50, 100], // 每页显示个数
      page_totals: 0, // 总条目数,
      //订单状态
      statusType: [
        { name: "未支付", value: 0 },
        { name: "已支付", value: 1 },
      ],
      // 发货状态 0 未发货 1已发货 2确认收货
      sendType: [
        { name: "未发货", value: 0 },
        { name: "已发货", value: 1 },
        { name: "确认收货", value: 2 },
      ],
      tableData: [],
      tableData1: [], //分成详情
      tableLoading: false,
      infoLoading: true,
      loading: false,
      tableLoading1: true,
      dividedDialogVisible: false, //分成
      dialogFormVisible: false, //女王卡优化分成
      centerDialogVisible: false,
      // 物流弹框
      logisticsDialog: false,
      //上传文件
      file: [],
      fileName: null,
      limitUpload: 1,
      fileList: [],
      fileTemp: null,
    };
  },
  filters: {
    // 订单状态
    statusFn(opt) {
      switch (opt) {
        case 0:
          return "未支付";
          break;
        case 1:
          return "已发货";
          break;
        default:
          // return "暂无";
          break;
      }
    },
    nullFn(opt) {
      if (opt) {
        return opt;
      } else {
        return "--";
      }
    },
    // 无数据显示
    noFn(opt) {
      if (opt) {
        return opt;
      } else {
        return "";
      }
    },
  },
  watch: {
    // params(val){
    //   console.log(val)
    //   this.$emit("childfun", this.params);
    // }
    order_time(val) {
      if (val) {
        this.form.order_time = val;
      } else {
        this.form.order_time = [];
      }
    },
    pay_time(val) {
      if (val) {
        this.form.pay_time = val;
      } else {
        this.form.pay_time = [];
      }
    },
  },
  created() {
    // console.log(121, process.env.BASE_API2);
  },
  //新加路由保存参数
  beforeRouteLeave(to, from, next) {
    // const answer = window.confirm("当前页面搜索条件将会被保存");
    //更新 put
    let keyname = this.$route.name;
    let value = JSON.stringify(this.form);
    sessionStorage.setItem(keyname, value);
    let position = this.$el.scrollTop;
    this.$store.commit("SAVE_POSITION", position); //离开路由时把位置存起来
    next();
  },
  updated() {
    this.$nextTick(function () {
      console.log("this.$store.state", this.$store.state);
      let position = this.$store.state.user.position; //返回页面取出来
      // window.scroll(0, position)
      this.$refs.DOM.scrollTo(0, position);
    });
  },
  mounted() {
    // 获取默认列表
    if (sessionStorage.getItem(this.$route.name)) {
      this.form = JSON.parse(sessionStorage.getItem(this.$route.name));
    }
    this.getList(this.form);
  },
  methods: {
    // param是自带参数。 this.$refs.upload.submit() 会自动调用 httpRequest方法.在里面取得file
    // httpRequest(param) {
    //   console.log(param);
    //   let fileObj = param.file; // 相当于input里取得的files
    //   let fd = new FormData(); // FormData 对象
    //   fd.append("file", fileObj); // 文件对象
    //   console.log(this.$refs.upload.submit());
    //   let url = process.env.CMS1_BASE_API + "cdnDel/uploadExcel";
    //   let config = {
    //     headers: {
    //       "Content-Type": "multipart/form-data",
    //     },
    //   };
    //   // axios.post(url, fd, config).then((res) => {
    //   //   if (res.code === 0) {
    //   //     this.submitForm(); //提交表单
    //   //   }
    //   // });
    // },
    // fileList 是文件列表发生变化后，返回的修改后的列表对象，这里直接赋值就好啦！
    fileChange(file, fileList) {
      console.log("文件列表发生变化后", file);
      this.file = JSON.stringify(file);
      console.log(this.file);
      this.fileTemp = file.raw;
      if (this.fileTemp) {
        if (
          this.fileTemp.type ==
            "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
          this.fileTemp.type == "application/vnd.ms-excel"
        ) {
          // this.importfxx(this.fileTemp);
        } else {
          this.$message({
            type: "warning",
            message: "附件格式错误，请删除后重新上传！",
          });
        }
      } else {
        this.$message({
          type: "warning",
          message: "请上传附件！",
        });
      }
      // this.dataList = fileList;
    },
    beforeAvatarUpload(file) {
      console.log("上传前回调", file);
      // const isXls =
      //   file.type === "application/vnd.ms-excel"? true:file.type === "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"? true: false;
      // if (!isXls) {
      //   this.$message.error("上传的文件只能是xls以及xlsx格式!");
      // }
      // return isXls;
      return true;
    },
    //成功回调
    upFile(response, file, fileList) {
      console.log("成功回调", fileList);
      // this.$refs.upload.submit();
    },
    handlePreview() {},
    handleRemove(file, fileList) {
      this.fileTemp = null;
    },
    //物流单号导入弹框
    handle() {
      this.file = [];
      this.fileName = null;
      this.logisticsDialog = true;
    },
    // 提交导入
    send() {
      console.log(this.$refs.upload.submit());
      if (this.file.length < 1) {
        this.$message.warning("请先上传EXCEL文件");
        return;
      } else {
        this.loading = true;
        giftLogisticsImport({ data: this.file }).then((res) => {
          console.log("res", res);
          if (res.data.code == 200) {
            this.loading = false;
            this.$message.success(res.data.msg);
            this.logisticsDialog = false;
            this.getList(this.form);
          }
        });
      }
    },
    beforeUpload(file) {
      console.log(222, file);
      this.file = file;
      this.fileName = file.name;
      return true;
    },
    //
    handleSuccess({ results, header }) {
      // console.log(11111);
      // console.log(results);
      const uploadData = results.map((item) => {
        return {
          pay_order_num: item["订单编号"],
          tracking_num: item["物流单号"],
        };
      });
      console.log(uploadData);
      console.log(header);
      this.file = uploadData;
    },
    toRoutes(name) {
      let route = { name };
      this.$router.push(route);
    },
    // 序号
    table_index(index) {
      return (this.form.page - 1) * this.form.pagesize + index + 1;
    },

    // 获取列表
    getList(e) {
      this.tableLoading = true;
      orderGiftList(e)
        .then((res) => {
          console.log("xinagqing", res);
          if (res.data.code == 200) {
            this.tableData = res.data.data;
            this.page_totals = res.data.total;
            this.tableLoading = false;
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning",
            });
          }
        })
        .catch((err) => {
          this.errorStatus(err.msg);
          this.tableLoading = false;
        });
    },
    //完成发货弹窗
    completeDelivery(pay_order_num) {
      this.tracking_num = "";
      this.centerDialogVisible = true;
      this.order_id = pay_order_num;
    },
    //完成发货保存
    save() {
      let datas = {
        order_sn: this.order_id,
        tracking_num: this.tracking_num,
      };
      giftDeliverGoods(datas).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.$message({
            type: "success",
            message: res.data.msg,
          });
          this.centerDialogVisible = false;
          this.tracking_num = "";
        } else {
          this.$message({
            type: "warning",
            message: res.data.msg,
          });
        }
      });
      this.centerDialogVisible = false;
    },
    // 分成详情
    getDetail(order_sn) {
      this.infoLoading = true;
      console.log("order_sn", order_sn);
      let data = { order_sn: order_sn, order_type: 1 };
      incomeTrans(data)
        .then((res) => {
          console.log("分成详情", res);
          if (res.data.code == 200 && res.data.data) {
            this.infoLoading = false;
            this.tableLoading1 = false;
            // this.form1.listDetail = res.data.data;
            this.form1.formTypeValue = res.data.data.split_mode;
            this.form1.applyTime = res.data.data.split_time;
            (this.form1.created_at = res.data.data.created_at),
              (this.form1.detailInfo.number = res.data.data.good_num);

            //奖励
            // let arr = [];
            // let arr1 = [];
            // let arr2 = [];
            // if (res.data.data) {
            //   res.data.data.income_list.forEach(item => {
            //     if (
            //       item.awardType == 16 ||
            //       item.awardType == 1 ||
            //       item.awardType == 2
            //     ) {
            //       arr.push(item);
            //     }
            //     if (item.awardType == 3) {
            //       arr1.push(item);
            //     }
            //     if (item.awardType == 8) {
            //       arr2.push(item);
            //     }
            //     this.form1.list1 = arr;
            //     this.form1.list2 = arr1;
            //     this.form1.list3 = arr2;
            //   });
            // } else {
            //   this.form1.list1 = [];
            //   this.form1.list2 = [];
            //   this.form1.list3 = [];
            // }
            this.tableData1 = res.data.data.income_list
              ? res.data.data.income_list
              : [];
            //分成用户链条
            this.userList = res.data.data.uidstr_list
              ? res.data.data.uidstr_list
              : [];
          } else {
            this.$message({
              showClose: true,
              message: res.data.msg,
              type: "warning",
            });
          }
        })
        .catch((err) => {
          this.errorStatus("补贴单未复审!");
        });
    },
    // 分成详情
    dividedEtails(id, info) {
      console.log("info", info);
      this.form1.detailInfo = info;
      let data = {
        orderId: id,
        type: 8,
      };
      this.getDetail(info.pay_order_num);
      // this.getUser(data);
      // this.detailInto(data);
      this.dividedDialogVisible = true;
    },

    // 分成弹窗关闭事件
    close() {
      this.dividedDialogVisible = false;
      this.form1 = {
        list1: [],
        list2: [],
        list3: [],
        listDetail: {},
        detailInfo: {},
      };
      this.userList = [];
    },
    // 查询
    handleSearch() {
      this.form.page = 1;
      this.getList(this.form);
    },

    // 导出
    handleExport() {
      let datas = { ...this.form };
      delete datas.page;
      delete datas.pagesize;
      orderGiftExport(datas)
        .then((res) => {
          commonFn.downFile("礼包订单导出", res);
        })
        .catch((err) => {
          this.errorStatus(err.msg);
        });
    },
    // 改变页面条数
    handleSizeChange(val) {
      this.form.pagesize = val;
      this.getList(this.form);
    },
    // 选择页数
    handleCurrentChange(val) {
      this.form.page = val;
      this.getList(this.form);
    },
    // // 弹窗组件
    eleMsg(txt, status) {
      this.$message({
        showClose: true,
        message: txt,
        type: status,
      });
    },
    // 失败状态弹窗
    errorStatus(txt) {
      this.eleMsg(txt, "error");
    },
  },
};
</script>
<style scoped>
.app-container {
  padding: 20px !important;
  background: transparent;
}
.formDiv {
  padding: 20px;
}
/* 主页列表样式 */
.listDiv {
  margin-bottom: 20px;
  padding: 0 20px;
}
.el-range-editor--medium.el-input__inner {
  width: 205px;
}
.pagesCon {
  text-align: right;
  margin-top: 20px;
}
.allCenter {
  text-align: center;
}
.spanToInput {
  width: 205px;
  min-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  border: 1px solid #ddd;
  text-align: left;
  padding: 0 12px;
}
.line {
  height: 25px;
  background: #f7f7f7;
}
.recommend {
  min-width: 280px;
  color: #1d2023;
  text-align: center;
  font-size: 16px;
  margin-left: 25px;
}
.boxContent {
  margin-top: 20px;
  height: 25px;
  line-height: 25px;
  border: 1px solid #ddd;
  text-align: center;
  padding: 0 12px;
}
.arrow {
  text-align: center;
  padding: 12px 0 0 0;
}
.fontColor {
  font-size: 16px;
  text-align: center;
  margin-bottom: 15px;
}
.mb_20 {
  font-size: 20px;
  text-align: center;
  margin-top: 20px;
}
</style>
